<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
        .left {
            background-color: antiquewhite;
            text-align: center;
            line-height: 300px;
        }

        .right {
            text-align: center;
            line-height: 300px;
            background-color: lightcoral;
        }

        .middle {
            text-align: center;
            line-height: 300px;
            background-color: lightcyan;
        }

        /* 题目1：实现左侧占30% 右侧占70% */
        /* float */
        /* .left {
                float: left;
                width: 30%;
            }

            .right {
                float: right;
                width: 70%;
            } */

        /* position:左边绝对定位，右边margin-left */
        /* body {
                position: relative;
            }

            .left {
                position: absolute;
                width: 30%;
            }

            .right {
                margin-left: 30%;
                width: 70%;
            } */

        /* flex */
        /* body {
                display: flex;
            }

            .left {
                width: 30%;
                flex: 1 1 auto;
            }

            .right {
                width: 70%;
                flex: 1 1 auto;
            } */

        /* grid */

        /* body {
                display: grid;
                grid-template-columns: 3fr 7fr;
            } */

        /* 题目2：实现左侧固定宽度 右侧自适应 */
        /* float:双flaot使用calc计算自适应宽度*/
        /* .left {
                float: left;
                width: 200px;
            }

            .right {
                float: right;
                width: calc(100% - 200px);
            } */

        /* float:左侧float，右侧BFC*/
        /* .left {
                float: left;
                width: 200px;
            }

            .right {
                display: table-cell;
                width: 9999px;
            } */

        /* position:左侧绝对定位，右边margin-left */
        /* body {
                position: relative;
            }

            .left {
                position: absolute;
                width: 200px;
            }

            .right {
                margin-left: 200px;
            } */

        /* flex */
        /* body {
                display: flex;
            }

            .left {
                width: 200px;
            }

            .right {
                flex: 1 1 auto;
            } */

        /* grid */
        /* body {
                display: grid;
                grid-template-columns: 200px 1fr;
            } */

        /* 题目3：实现右侧固定宽度 左侧自适应 */
        /* float:两边float，左边calc */
        /* .left {
                float: left;
                width: calc(100% - 200px);
            }

            .right {
                float: right;
                width: 200px;
            } */

        /* position */
        /* body {
            position: relative;
        }

        .right {
            position: absolute;
            width: 200px;
            right: 0;
            top: 0;
        }

        .left {
            margin-right: 200px;
        } */

        /* flex */
        /* body {
            display: flex;
        }

        .left {
            flex:1 1 auto;
        }
        .right {
            width: 200px;
        } */
        /* grid */
        /* body {
            display: grid;
            grid-template-columns: 1fr 200px;
        } */

        /* 题目4：三栏布局，左右固定宽度，中间自适应 */
        /*三个float: 圣杯布局 */
        /* body {
            padding: 0 200px;
        }

        .middle {
            float: left;
            width: 100%;
        }

        .left {
            float: left;
            width: 200px;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }

        .right {
            float: left;
            width: 200px;
            margin-left:-200px;
            position: relative;
            left: 200px;
        } */

        /*三个float: 双飞翼布局 */
        /* .contain { 
            float: left;
            width: 100%;
        }

        .middle {
            margin: 0 200px;
        }

        .left {
            float: left;
            margin-left: -100%;
            width: 200px;
        }

        .right {
            float: left;
            margin-left: -200px;
            width: 200px;
        } */

        /* flex */

        /* body {
            display: flex;
        }

        .left {
            flex: 0 0 auto;
            width: 200px;
            order: 1;
        }

        .right {
            flex: 0 0 auto;
            width: 200px;
            order: 3;
        }

        .middle {
            flex: 1 1 auto;
            order: 2;
        } */

        /* grid */
        /* body {
            display: grid;
            grid-template-columns: 200px 1fr 200px;
        }

        .middle {
            order: 2;
        }

        .left {
            order: 1;
        }

        .right {
            order: 3;
        } */

        /* 题目5：三栏布局，左边中间固定宽度，右边自适应 */
        /* float:双飞翼布局*/
        /* .contain,
        .left,
        .right {
            float: left;
        }

        .contain {
            width: 100%;
        }

        .middle {
            margin: 0 0 0 400px;
        }

        .left {
            width: 200px;
            margin-left: -100%;
        }
        .right {
            width: 200px;
            margin-left: calc(-100% + 200px);
        } */

        /* flex */
        /* body {
            display: flex;
        }

        .middle {
            order: 3;
            flex: 1 1 auto;
        }

        .left {
            order: 1;
            width: 200px;
        }

        .right {
            order: 2;
            width: 200px;
        } */

        /* grid */
        /* body {
            display: grid;
            grid-template-columns: 200px 200px 1fr;
        }

        .middle {
            order: 3;
        }

        .right {
            order: 2;
        }

        .left {
            order: 1;
        } */
    </style>
</head>

<body>
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

</html>